<template>
  <el-dialog
    title="选择接口类型"
    v-model="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
  >
    <div class="type-select">
      <div
        class="type-card"
        :class="{ active: selectedType === ApiType.MagicAPI }"
        @click="selectedType = ApiType.MagicAPI"
      >
        <el-icon class="icon"><DataLine /></el-icon>
        <h3>MagicAPI 接口</h3>
        <p>基于 MagicAPI 的数据库查询接口</p>
        <ul>
          <li>支持多种数据库类型</li>
          <li>内置分页和缓存</li>
          <li>支持事务控制</li>
          <li>动态SQL能力</li>
        </ul>
      </div>

      <div
        class="type-card"
        :class="{ active: selectedType === ApiType.APIJSON }"
        @click="selectedType = ApiType.APIJSON"
      >
        <el-icon class="icon"><Connection /></el-icon>
        <h3>APIJSON 接口</h3>
        <p>基于 APIJSON 协议的接口</p>
        <ul>
          <li>自动化的 CRUD 操作</li>
          <li>灵活的查询条件</li>
          <li>支持关联查询</li>
          <li>内置权限控制</li>
        </ul>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button
          type="primary"
          :disabled="!selectedType"
          @click="handleConfirm"
        >
          下一步
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { DataLine, Connection } from "@element-plus/icons-vue";
import { ApiType } from "@/types/api";

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: "update:visible", value: boolean): void;
  (e: "select", type: ApiType): void;
}>();

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

const selectedType = ref<ApiType>();

const handleCancel = () => {
  dialogVisible.value = false;
  selectedType.value = undefined;
};

const handleConfirm = () => {
  if (selectedType.value) {
    emit("select", selectedType.value);
    handleCancel();
  }
};
</script>

<style scoped>
.type-select {
  display: flex;
  gap: 20px;
  padding: 20px 0;
}

.type-card {
  flex: 1;
  padding: 20px;
  border: 2px solid var(--el-border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.type-card:hover {
  border-color: var(--el-color-primary-light-5);
}

.type-card.active {
  border-color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

.icon {
  font-size: 32px;
  color: var(--el-color-primary);
  margin-bottom: 16px;
}

h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

p {
  margin: 0 0 16px;
  color: var(--el-text-color-secondary);
}

ul {
  margin: 0;
  padding-left: 20px;
  color: var(--el-text-color-regular);
}

li {
  margin-bottom: 4px;
}

li:last-child {
  margin-bottom: 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 